<template>
  <div class="wrap">
    <img src="../assets/success.png" v-if="state ==1 " class="success" alt="">
    <img src="../assets/error.png" v-if="state ==2" class="success" alt="">
    <span class="ts">{{ts}}</span>
    <div class="user">
      <img :src="userInfo.avatar?userInfo.avatar:defaultImg" :onerror="defaultImg" alt="" srcset="">
      <p>{{userInfo.username}}</p>
    </div>
    <p class="ts2">进入公众号→客户入口→微信登陆
      <br>首次登陆绑定报货预留手机号即可查看订单
    </p>
    <p class="follow" @click="show = true">开启微信服务</p>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <img src="../assets/code.jpg" alt="">
        <span>长按识别二维码开启</span>
      </div>
    </van-overlay>
  </div>
</template>
<style lang="scss" scoped>
.user {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px auto;
  width: 80%;
  img {
    width: 40px;
    height: 40px;
    object-fit: cover;
  }
  p {
    margin-left: 6px;
    font-size: 14px;
  }
}
.ts2 {
  text-align: center;
  width: 80%;
  margin: 0 auto 0;
}
.success {
  display: block;
  margin: 90px auto 30px;
  width: 90px;
  height: 90px;
}
.ts {
  text-align: center;
  color: #555;
  text-align: center;
  display: block;
  font-size: 18px;
}
.follow {
  color: #fff;
  background: #3fd9c9;
  margin: 50px auto 0;
  width: 80%;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  border-radius: 4px;
}
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  img {
    margin-top: 80px;
  }
  span {
    color: #fff;
    text-align: center;
    margin-top: 15px;
  }
}
</style>
<script>
import { follow ,getUserInfo} from "@/utils/interface";
import { Dialog, Toast } from "vant";

export default {
  data() {
    return {
      show: false,
      ts: "",
      state: 0,
      userInfo: {},
      defaultImg: 'this.src="' + require("../assets/user3.jpg") + '"'
    };
  },
  created() {
    document.title = "关注";
    if (this.getUrlParams("code")) {
       getUserInfo({ code: this.getUrlParams("code") }).then(res=>{
          localStorage.setItem("wechataccess_user_token", res.data.data.openid);
          localStorage.setItem("mobileInfo", JSON.stringify(res.data.data));
          this.init()
       })
    } else {
      window.location.href =
          "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx88c9827af713656d&redirect_uri=http%3A%2F%2Fwww.jiebaodingdan.com%2Fcustomer-mobile%2F%23%2Ffollow&response_type=code&scope=snsapi_userinfo&state=" +
          this.getUrlParams("state") +
          "#wechat_redirect";
    }
  },
  methods: {
    getUrlParams(name) {
      // 不传name返回所有值，否则返回对应值
      var url = window.location.search;
      if (url.indexOf("?") == 1) {
        return false;
      }
      url = url.substr(1);
      url = url.split("&");
      var name = name || "";
      var nameres;
      // 获取全部参数及其值
      for (var i = 0; i < url.length; i++) {
        var info = url[i].split("=");
        var obj = {};
        obj[info[0]] = decodeURI(info[1]);
        url[i] = obj;
      }
      // 如果传入一个参数名称，就匹配其值
      if (name) {
        for (var i = 0; i < url.length; i++) {
          for (const key in url[i]) {
            if (key == name) {
              nameres = url[i][key];
            }
          }
        }
      } else {
        nameres = url;
      }
      // 返回结果
      return nameres;
    },
    go() {
      window.location.href = "http://www.jiebaodingdan.com/customer-mobile/#/";
    },
    init() {
      let str = this.getUrlParams("state");
      if (str.indexOf("%2F//") != -1) {
        str = str.replace("%2F//", "");
      } else if (str.indexOf("%2F") != -1) {
        str = str.replace("%2F", "");
      } else if (str.indexOf("/") != -1) {
        str = str.replace("/", "");
      } else if (str.indexOf("%2F%2F") != -1) {
        str = str.replace("%2F%2F", "");
      }
      let openid = localStorage.getItem("wechataccess_user_token");
      let user = JSON.parse(localStorage.getItem("mobileInfo"));
      follow({
        bizUserId: str,
        openid: openid,
        username: user.nickname,
        avatar: user.headimgurl
      }).then(res => {
        if (res.data.code == 200) {
          this.userInfo = res.data.data;
          this.ts = "关注成功";
          this.state = 1;
        
        } else {
          this.ts = "关注成功";
          this.state = 1;
          console.log(res.data);
        }
      });
    }
  }
};
</script>